CHAPTER 


12 


CREATING SLICED IMAGES 


Breaking Up Images for Display on the Web 


In this chapter, you will: 
è Create image slices 
+ Edit image slices 
+ Set image slice options 
+è Create sliced images manually 


liced images represent the culmination of everything you have learned 

so far about Web graphics. They can contain backgrounds, buttons, 
rollover effects, and animation, and require knowledge of all these different 
types of Web graphics. 


You can create slices manually with Photoshop or ImageReady. ImageReady 
has more features for working with slices than Photoshop, so this chapter 
focuses on using ImageReady to create image slices. 


Designing and creating sliced images requires a deeper understanding of HTML 
and Web graphics than creating simple images such as buttons or backgrounds. 
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CREATING IMAGE SLICES 


An image slice is a rectangular piece of an image to which you can assign links and 
apply rollover and animation effects. While any whole image can be used this way, 
using image slices allows you to link, animate, or use a rollover effect on individual 
areas of an image. Image maps allow you to link individual parts of an image, but you 
cannot animate or swap these parts; the image used as the map is one image. Images 
used as slices, however, are separate files that can be animated or swapped. You fit slices 
together on a Web page to reconstruct the original image. When you save a sliced 
image in ImageReady, each slice is positioned individually in the HTML file and can 
contain its own link and rollover effects. 


Because they are saved as separate images, slices can have different optimization set- 
tings. You can save slices in different formats or as empty areas requiring no image. For 
example, the image shown in Figure 12-1 has some high-color, high-texture areas and 
some areas that are blank. The image would download more quickly if you replaced 
the blank areas with simple HTML color. You could also slice the image to isolate the 
high-color areas, and then save the remaining areas as empty slices so that the user 
does not have to download blank image files. 


Create only as many slices as you need to achieve the desired optimization, rollover effects, 
and animation. Every file that you force a user to download is a separate request to the Web 
server, and requires at least a fraction of a second to transfer, even if it is well-optimized. 
Creating too many slices from an image can actually slow down the loading of the page. 


For example, an image with a file size of 60 KB requires that the browser makes one 
request to the server. If you slice the image into 30 pieces and optimize each piece 
separately, the combined file size of all the slices might be only 40 KB, but would 
require that the browser make 30 separate requests from the server. While the actual 
amount of data is smaller with the sliced images, the load time might be longer 
because of the extra contacts with the server. 


Types of Slices 


You create different types of slices with the Slice tool in either Photoshop or ImageReady. 
The slices do not affect the image itself until you save the image with the Save Optimized 
As command. Doing so cuts the original image into smaller images, which fit together like 
pieces of a jigsaw puzzle to re-create the original image in a Web browser. 


You can create three types of slices: 
a User-slices 
a Layer-based slices 


a Auto-slices 
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W stop.tif @ 100% (Original) 


High-color areas should be isolated and optimized 
accordingly 


Areas without color do not require an image 


Low-color areas can be isolated and 
further optimized 
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Figure 12-4 An image with different optimization needs 


Just as you can create image map areas with tools or from layers, you can also create 
slices with tools or from layers. Slices created with the Slice tool are called user-slices. 
Slices created from layers are called layer-based slices. When you create a new slice of 
either type, ImageReady fills in the remaining areas of the image with auto-slices. 
Whenever you add, delete, or modify slices in an image, the auto-slices automatically 
resize to fill the leftover area. 


Figure 12-2 shows an image being sliced in ImageReady. The different types of slices 
are indicated by the icon in the upper-left corner of each slice and by the color of the 
slice border. User-slices and layer-based slices are defined by a solid line, while auto- 
slices are defined by a dotted line. 


Auto-slices have gray symbols and dotted outlines 


User-slices and auto-slices are indicated by one type of icon; layer- 
based slices are indicated by another 


User-slices and layer-based slices have colored symbols and solid outlines 


Figure 12-2 Types of slices 


The distinction among the three types of slices only matters while editing slices. Once 
you save the image and the image slices are created as separate files, there is no differ- 
ence between user-slices, layer-based slices, or auto-slices. 
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Creating User-Slices 


You can create user-slices with the Slice tool. In ImageReady you can also convert selec- 
tion areas or outlines defined by guides into slices. 


To create a user-slice in Photoshop: 
1. In Photoshop, open apples.tif from the Data Disk. 
2. Click the Slice tool in the toolbox. 


Figure 12-3 shows the Options bar in Photoshop when the Slice tool is selected. 


£ | Style: [Normal z] wiin: f Height: [ | I? Show Slice Numbers 


Line Color: JLight Blue z] 


Figure 12-3 Slice tool options 


3. In the Options bar, click the Style list arrow and then click Normal. All of 
the options are described in the following list: 


m Choose Constrained Aspect Ratio to set the proportions of the slice. 
For example, enter 1.5 in the Height text box and 3 in the Width text 
box. The width will always be twice as wide as it is high, regardless of the 
actual size of the slice. 


= Choose Fixed Size to set dimensions for the slice. You can use decimal val- 
ues for the aspect ratio, but you must use whole numbers for the fixed size. 


a Choose Normal to have full control over the size and proportions of 
the slice. 


4. Enable Snap by selecting Snap from the View menu. This forces new slices to 
justify their edges to the edges of adjacent slices. 


5. Drag the Slice tool over the left-third of the image. Do not select the white 
area. As you drag, you can hold down the Shift key to force the aspect ratio 
to a perfect square. Hold down the Option key (Alt key in Windows) to 
draw from the center, rather than the upper-left. You see two slices, 01 and 02. 
Slice 01 is the selected slice and is fully transparent. Slice 02 is not selected 
and is grayed-out because it is not the current slice. 


6. Click the Jump to ImageReady button at the bottom of the toolbox. 
As in Photoshop, ImageReady lets you create a slice from an area you select in an image. 
To create a slice from a selection in ImageReady: 


1. Use the Rectangular Marquee tool to select the center-third of the image. Do 
not select the white area. Make sure the Feather is set to 0 px in the Options bar. 


2. Click Slices on the menu bar, and then click Create Slice from Selection. 
You see four slices, 01, 02, 03, and 04. Slices 02 and 04 are auto-slices that fill 
the area left over by the user-slices. 
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You can also use the Lasso, Magic Wand, or Elliptical Marquee tool to select an area of 
the image. Although the selection can have an irregular shape, the resultant slice always 
is a rectangle. If the initial selection area is not rectangular, the generated slice is a rec- 
tangle large enough to cover the complete selection. 


You often want to use the smallest slice possible that completely encloses an irregular 
area of pixels of a certain color. The primary way to select these pixels is with the 
Magic Wand tool. 


To create a slice from an irregular selection: 


1. Select the Magic Wand tool and set the Tolerance to 32. Check both 
Anti-aliased and Contiguous. 


2. Select part of the blue tree in the upper-left corner of the image. 


3. Click Slices on the menu bar, and then click Create Slice from Selection. 
This creates a new slice based on the selection, as well as additional user-slices 
to fill in the remaining space. At this point your image should look similar to 
the one in Figure 12-4. 


H apples. tif @ 100% (Optimized) = 


Figure 12-4 Creating a slice from an irregular selection area 


Creating Slices from Guides 


In ImageReady you can also create slices from an image containing guides. Recall that 
guides are thin lines that appear over an image in ImageReady or Photoshop, but do 
not appear over the final Web graphic. You often will want to establish the division of 
an image using guides before you actually implement the slices. Guides are less intru- 
sive visually and allow you to see what you are doing as you edit and reposition ele- 
ments in the image. For more on guides, see the Creating Splash Screens chapter. 
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To create slices from guides in ImageReady: 


1. In apples.tif, create two guides in the open image by dragging the mouse 
pointer from the upper ruler in the document window down into the image 
area. Place the guides at 4 and % from the top of the image. 


2. Click Slices on the menu bar, and then click Create Slices from Guides. This 
creates new slices based on the guides, deleting the slices you created earlier. 


The preceding steps create as many user-slices as necessary for all the intersections of 
vertical and horizontal guides. If you move the guides after creating the slices this way, 
the slices do not resize to fit the new position of the guides. Creating slices from guides 
deletes any existing slices, so you should use this method only to create initial slices 
and not to add to existing ones. 


Creating Layer-Based Slices 


You can also create slices from layers. You often design images, especially large ones such 
as those used for sliced images, using multiple layers, with each separate image element 
in its own layer. It is convenient to use the layers as the basis for image slices, rather than 
having to create them with the Slice tool. 


Figure 12-5 shows a slice created from a layer. When you move the layer or edit the 
transparency in the layer, the slice automatically resizes to fit the layer again. When 
creating a slice from a layer, the software uses the smallest rectangle it can to select the 
image information in the layer, and excludes all transparent pixels. 


Layer used as basis for slice 


Layer-based slice 


Figure 12-5 A slice created from a layer 


To create a slice from a layer: 
1. In apples.tif, create a new layer. 
2. Use the Paintbrush tool to add a filled blue circle in the center of the image. 


3. Choose New Layer-Based Slice from the Layer menu. This creates a new 
slice around the blue spot, and additional user-slices to fill the remaining area. 


4. Use the Move tool to drag the blue spot to a new area on the image. The 
slices follow the spot, and are redrawn around the new location. 
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Once you have created your layer-based slices, you must convert them to user-slices 
before you can perform certain edits, such as combining them with other slices. 


Converting Slices 


User-slices have the most options for editing. If you need to manipulate an auto-slice 
or layer-based slice, you should first convert it to a user-slice. 


Converting Auto-Slices to User-Slices 


You can perform any type of edit on user-slices, including moving, resizing, and opti- 
mizing. Auto-slices, however, are linked to each other and they all must share the 
same optimization settings. You can convert auto-slices to user-slices to have more 
control over them. Once an auto-slice is converted to a user-slice, it no longer resizes 
itself based on the size and position of other slices. 


If you try to set options for auto-slices, or if you try to divide, combine, or link auto- 
slices, ImageReady automatically converts them to user-slices before performing the 
edit. Almost anything you do to an auto-slice converts it to a user-slice. Once converted, 
it will not resize to fill in gaps left by other slices. 


You can also convert auto-slices manually. In Photoshop, select an auto-slice, and then 
click Promote to User Slice in the Options bar. In ImageReady, you can select one or 
more auto-slices, then select Promote to User-slice from the Slices menu. 


Converting Layer-Based Slices to User-Slices 


Layer-based slices rely on the contents of the layers to determine their size and posi- 
tion. To edit a layer-based slice, edit the layer itself. You can combine layer-based 
slices by merging their layers, and you can move layer-based slices by repositioning 
the contents of their associated layers. When you are finished editing the layer, you 
might want to convert the layer-based slice to a user-slice to combine it with other 
user-slices. Once converted, the slice cannot become a layer-based slice again. You 
convert layer-based slices to user-slices the same way you convert auto-slices. In 
Photoshop, select a layer-based slice and click Promote to User-Slice in the Options 
bar. In ImageReady, select one or more layer-based slices and select Promote to User- 
Slice from the Slices menu. 


Selecting Slices 


Select slices in Photoshop or ImageReady with the Slice Select tool. The Slice Select 
tool is available with the Slice tool in the toolbox, as shown in Figure 12-6. To apply 
optimization settings to the different slices, you can also select slices in Photoshop in the 
Save for Web dialog box. 
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Slice Select tool 


Figure 12-6 The Slice Select tool 


In the Save for Web dialog box, you can select multiple slices by holding the Shift key 
while selecting, or by dragging the pointer over the slices you want to select. If slices 
overlap each other, use the Slice Select tool to select the underlying slice by clicking the 
part you can see. 


In ImageReady, you can save slice selections to group slices into a single set. 
To save a slice selection: 
1. Select one or more slices. 


2. Click Slices on the menu bar, and then click Save Slice Selection. The 
Save Slice Selection dialog box appears. 


3. Assign a name to the selection and click OK. 


You then can load the selection later and immediately select multiple slices without hav- 
ing to click each one separately. You can load or delete slice selections by selecting the 
appropriate options from the Slices menu. Deleting a slice selection does not delete the 
slices themselves. 


Deleting Slices 


You can delete user-slices or layer-based slices, and auto-slices will fill in the remaining area. 
First select the slice, and then press the Delete key or the Backspace key. In ImageReady, 
you can also delete slices by selecting Delete Slice from the Slices menu or from the Slice 
palette menu. To delete all slices, select Delete All from the Slices menu in ImageReady, or 
select Clear Slices from the View menu in Photoshop. Deleting all slices leaves one auto- 
slice covering the entire image. Deleting a layer-based slice deletes the slice but does not 
delete the associated layer. Deleting the layer removes both the layer and the layer-based 
slice. You cannot delete auto-slices. 


Locking Slices 


When you are finished making changes to your slices, you can lock the slices so that you 
do not inadvertently move or resize them while making changes to the image. You can 
lock slices only in Photoshop. To do so, select Lock Slices from the View menu. 
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Setting Slice Preferences 


Recall that slices are indicated by colored outlines, numbers, and symbols in the upper- 
left corner of each slice. Sometimes these identifiers get in the way of editing the image. 
In this case, you can temporarily hide the slice outlines and symbols or adjust their 
appearance. 


Hiding Slices 

The easiest way to prevent slice outlines from blocking your view of the image is to 
hide the outlines. This does not delete the slices; it only makes the outlines invisible. 
To hide all slices in either Photoshop or ImageReady, do one of the following: 


a Deselect Show Extras in the View menu. This hides all guides and slices. 


m Select Show from the View menu and deselect Slices. This hides all slices. 
Check boxes indicate which options are still visible. 


a Select Show from the View menu and select None. This hides all guides 
and slices. 


To show slices again, reverse one of the above steps, or simply click anywhere in the 
image with the Slice tool or the Slice Select tool. 


Setting Preferences for Slice Outlines 


You also can adjust the appearance of slice outlines, numbers, and symbols in ImageReady. 
User-slices, layer-based slices, and auto-slices are differentiated from each other by the color 
of their outlines. User-slices and layer-based slices have solid outlines and blue symbols. 
Auto-slices have dotted outlines and gray symbols. You can change these colors in 
ImageReady by setting preferences. 


To adjust the preferences for slices in ImageReady: 


1. Click Edit on the menu bar, point to Preferences, and then click Slices to 
open the Slices area of the Preferences dialog box, as shown in Figure 12-7. 


2. Click the Line Color list arrow in the Preferences dialog box and select a 
new slice outline color. 


To change the slice outline color in Photoshop, select a new color from the 
gi Line Color menu in the Options bar. 
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Preferences 


Figure 12-7 Setting slice preferences 


Setting Preferences for Slice Outlines 


In ImageReady, slices appear as slightly opaque areas over the image, as shown in 
Figure 12-8. Although the black ring in the image is actually the same color through- 
out the image, it appears slightly lighter where it is enclosed by a user-slice or layer- 
based slice, and much lighter where it is enclosed by an auto-slice. Only in the selected 
slice in the upper-right corner of the image is the actual image area fully visible. This 
shading does not affect the saved-image slices and serves only to help make the slices 
more visible during editing. By default, user-slices and layer-based slices are 20% opaque 
and auto-slices are 40% opaque. Selected slices are fully transparent (0% opaque). You 
can change the amount of opacity for slices. 


To change slice opacity: 
1. Open the Preferences dialog box again and view the Slices section. 


2. In the Color Adjustments text box, type or drag the slider to enter an opacity 
value for User-slices and Auto-slices. The value you enter in the User-slices 
text box affects both user-slices and layer-based slices. A value of 0 means the 
slice will be fully transparent. A value of 100 means the slice will be com- 
pletely opaque, unless it is selected. 
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Selected slices are displayed fully transparent 


User-slices and layer-based slices are displayed with 20% opacity 


Auto-slices are displayed with 40% opacity 


Figure 12-8 Slices with different opacity 


Setting Preferences for Slice Numbers and Symbols 


Slices are identified by the numbers and symbols that appear in the upper-left corner of 
each slice. The numbering always starts in the upper-left section of the image. As you 
create and move slices, the numbers change. The symbols indicate whether a slice is a 
user-slice, auto-slice, or layer-based slice, as shown in Figure 12-9. Symbols also indicate 
whether the slice contains a rollover effect, or is linked. (Linking is covered later in this 
chapter). You can change the display of numbers and symbols in slices. In the Slices 
Preferences dialog box, select one of the three size options under Numbers and Symbols: 


m Select None to disable the display of numbers and symbols. 
m Select the small icon to display numbers and symbols at their default size. 


m Select the large icon to display numbers and symbols in an enlarged size. 


Linked slices are denoted with chain symbols 


Slices in the same selection set share the same 
d symbol color 
01 $ 


02 B03 & 


Slices containing rollover effects are indicated with a 
rollover symbol 


Figure 12-9 Different types of slice symbols 


You can also adjust the opacity of the numbers and symbols by entering a new value in 
the text field named Opacity. A value of 100% means the numbers and symbols are fully 
opaque, blocking the image behind them. Lower values make the numbers and symbols 
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more transparent, allowing the image to show through. You can disable the display of 
slice numbers and symbols by selecting Show Lines Only. This causes slices to be shown 
with just the outlines and no symbols. 


To show or hide slice numbers in Photoshop, select Show Slice Numbers in 
gt the Options bar. 


Once you have created some slices, you may need to edit them. 


EDITING SLICES 


The slices you initially create are usually not positioned exactly where you want them. 
Take some time to reduce the total number of slices, and reposition the slices so that 
they do not leave gaps. If you find that the auto-slices and layer-based slices need to be 
modified, convert them to user-slices before editing. 


Creating Slices from Other Slices 


Often it is easier to create slices from existing slices rather than to make completely new 
ones. You can duplicate the settings of an existing slice, divide a slice into two or more 
pieces, or combine multiple slices into one. 


Duplicating Slices in ImageReady 


When creating multiple slices, you may find it easier to duplicate existing slices. You can 
duplicate slices only when using ImageReady. Duplicated slices are always user-slices, 
and have the same optimization settings and dimensions of the original slice. 


To duplicate a slice: 

1. Open apples.tif on the Data Disk if it is not already open. 

2. Delete all existing slices by selecting Delete All from the Slices menu. 
3. Create a new slice with the Slice tool. 
4 


. Select Duplicate Slice from the Slices menu or from the Slice palette menu. 
You can also duplicate slices by holding down the Option key (Alt key in 
Windows) and dragging the original slice to a new location. The new slice 
appears above the original, slightly lower, and to the right. 


5. Drag the duplicated slice to a new position. Duplicated slices can be edited 
like any other user-slice. 


You can also copy and paste slices. First select one or more slices, select Copy Slice from 
the Slice palette menu, then select Paste Slice from the Slice palette menu. 
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Dividing Slices 


When you want to quickly create multiple slices, it is sometimes easier to split a slice 
into two or more pieces instead of creating new slices. For example, you can create a 
grid of slices from one large one. In ImageReady you can divide user-slices, but not 
layer-based slices. If you want to divide a layer-based slice, you must first convert it to a 
user-slice. You can divide auto-slices only when at least one user-slice also is selected. 
The new slices created by dividing are always user-slices. 


To divide slices: 
1. Create a new image in ImageReady that is at least 100 pixels high and wide. 


2. All new images in ImageReady are by default one large auto-slice. You 
should see a slice number and symbol in the upper-left corner of the image. 
Convert the auto-slice to a user-slice by selecting Promote to User-slice 
from the Slices menu. 


3. Select Divide Slice from the Slices menu or from the Slice palette menu. 
The Divide Slice dialog box appears, as shown in Figure 12-10. 


Divide Slice 
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Figure 12-10 The Divide Slice dialog box 


4. Click one or both of the checkboxes to divide the slice horizontally and/or 
vertically. Selecting both directions divides the slice into a grid of new slices. 


5. Choose how to divide. Select the number in the top text field (“slices down, 
evenly spaced” or “slices across, evenly spaced”) to divide the slice into a 
fixed number of new slices. A value of 1 creates no new slices. The combined 
height of all the new slices is the same as the height of the original slice, and 
is evenly divided by the number of slices. If you have more than one slice 
selected, each slice is divided separately. 
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Alternately, select the number in the lower text field (“pixels per slice”) to divide the 
slice into slices of a fixed size. The number of new slices is determined by the size of 
the original. If the number in this field does not divide evenly into the dimensions of the 
original, the remaining space will be made into another user-slice of a smaller size. This 
might result in a very thin slice that is difficult to edit, so it should be eliminated. 
Simply deleting this thin user-slice leaves an auto-slice of the same size, so to remove 
the slice, expand the adjacent slice to fill the area. 


Combining Slices 


You might decide that you have too many slices. For example, you may notice that 
two adjacent slices use the same optimization settings, so there is no benefit in hav- 
ing them as separate slices. You can delete unwanted slices and resize existing slices to 
fill the space, or in ImageReady you can combine existing user-slices and auto-slices. 
You cannot combine layer-based slices. When you combine slices, the resulting slice 
is always a user-slice. 


To combine slices, select two or more user-slices and select Combine Slices from the 
Slices menu. 


If the edges of the slices are adjacent and aligned, the new slice is simply the combi- 
nation of both slices. If the edges of the slices are not adjacent or aligned, the new slice 
is as large as necessary to completely enclose both original slices. This may result in 
overlapping slices, which creates extra, unnecessary image files. Eliminate slice overlap 
by transposing the slices, by moving, resizing or aligning them as described in the next 
section. The optimization settings of the new slice are those of the first slice selected. 
Figure 12-11 shows how two slices are combined into one larger slice. The two selected 
slices on the left are combined and result in the selected slice on the right. 


Figure 12-11 Combining slices 


Transposing Slices 


You can move and resize user-slices in Photoshop and ImageReady using the Slice 
Select tool, or by changing the numerical values in the Slice palette. 
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To move a layer-based slice, you move the contents of the associated layer, or convert the 
layer-based slice to a user-slice. Auto-slices automatically resize and reposition themselves 
to fit the remaining space when you move or resize user-slices or layer-based slices. To 
manually move or resize an auto-slice, first convert the auto-slice to a user-slice. 


When the Slice Select tool is selected, the Options bar displays options for aligning, dis- 
tributing, and changing the stacking order of slices. Figure 12-12 shows the Options bar 
when the Slice Select tool is selected. 


| 


Figure 12-12 Options for the Slice Select tool 


Moving and Resizing with the Slice Select Tool 


To move and resize slices in ImageReady or Photoshop with the Slice Select tool you 
first select a slice in Photoshop, or one or more slices in ImageReady. Then, with the 
Slice Select tool selected, drag the slice or slices to a new location in the image. You 
can hold down the Shift key to constrain the repositioning to vertical, horizontal, or 
45-degree diagonal lines. To change the shape of the slice, drag one of the handles on 
the side of the slice. To change the size of the slice, drag one of the corner handles. 
You can maintain the aspect ratio of the slice by holding down the Shift key. 


You can enable Snap to snap slices to guides or to the edges of existing slices. Click View 
on the menu bar, point to Snap To to see which Snap options are enabled, and then click 
a Snap option. 


Moving and Resizing with the Slice Palette 


When the Slice palette is expanded, you can resize and reposition slices. Expand 
the Slice palette to show the Dimensions area in ImageReady, or click the Slice 
Options button in Photoshop to open the Slice Options dialog box, shown in 
Figure 12-13. Both display the X and Y coordinates of the upper-left corner of the 
selected slice and the width and height of the slice. 


To resize a user-slice using numerical coordinates: 
1. Select a slice. 


2. Show the Slice palette and make sure it is expanded by clicking the palette 
tab. The expanded Slice palette, shown in Figure 12-14, displays coordinates 
and dimensions for the selected slice. 
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Slice Options 


[imase El 
Untitled-1_01 


Figure 12-14 The Slice palette 


3. Change any of the four values by clicking the arrows next to the text field or 
by typing directly in the text field. Raising the X value moves the slice to the 
right; lowering it moves the slice to the left. Changing the Y value repositions 
the slice vertically. Editing the W value expands the slice to the right. Editing 
the H value expands the slice downward. All auto-slices resize accordingly 
and the slices are renumbered automatically, if necessary. 


4. Check the Constrain Proportions checkbox in the expanded Slice palette 
to force a constant aspect ratio for the width and height of the slice. 


Aligning Slices in ImageReady 


Often the slices you create will not line up in neat rows and columns. However, the final 
slices must be lined up neatly to create an efficient HTML file that does not include 
leftover slivers of slices. You cannot align slices in Photoshop, and you cannot align layer- 
based slices or auto-slices. 
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To align user-slices in ImageReady, select two or more slices with the Slice Select tool. 
Click one of the following Align buttons in the Options bar to align selected slices: 


a Align Top Edges to move the selected slices vertically, so that their top 
edges are in the same horizontal line. 


a Align Vertical Centers to move the selected slices vertically, so that their 
centers are in the same horizontal line. 


a Align Bottom Edges to move the selected slices vertically, so that their 
bottom edges are in the same horizontal line. 


a Align Left Edges to move the selected slices horizontally, so that their left 
sides are in the same vertical line. 


a Align Horizontal Centers to move the selected slices horizontally, so that 
their centers are in the same vertical line. 


a Align Right Edges to move the selected slices horizontally, so that their 
right sides are in the same vertical line. 


You can also select Align from the Slices menu and select one of the six alignment options. 


Distributing Slices in ImageReady 


If the slices you create become so crowded that you cannot distinguish one from 
another, you can distribute them. Distributing spreads slices vertically or horizontally 
across the image. While aligning slices causes them to share common edges, distributing 
slices spaces the edges evenly from each other. Aligning slices usually results in fewer 
auto-slices, reducing the number of image files that must be downloaded. Distributing 
slices, however, sometimes produces extra auto-slices. You can distribute slices only in 
ImageReady; you cannot distribute slices in Photoshop. You can distribute user-slices 
only; you cannot distribute layer-based slices or auto-slices. 


To distribute user-slices in ImageReady, select three or more slices. Then click one of 
the following Distribute buttons in the Options bar: 


a Distribute Top Edges to vertically space apart the top edges of the slices. 
a Distribute Vertical Centers to vertically space apart the centers of the slices. 


a Distribute Bottom Edges to vertically space apart the bottom edges of 
the slices. 


a Distribute Left Edges to horizontally space apart the left sides of the slices. 


a Distribute Horizontal Centers to horizontally space apart the centers of 
the slices. 


a Distribute Right Edges to horizontally space apart the right sides of the slices. 


You can also select Distribute from the Slices menu and select one of the six distribu- 
tion options. 
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Arranging Slices in ImageReady 


As you create and modify slices, they might overlap each other. Each new slice appears 
at the front of the stack of slices. User-slices and layer-based slices are part of the slice 
stack, but auto-slices are not. When you save images with overlapping slices, underlying 
user-slices and layer-based slices are automatically divided and resized based on the slice 
or slices above them. You can change the stacking order of slices to change how under- 
lying slices are divided and resized. 


To change the stacking order of slices, select one or more slices. Then click one of the 
Arrange buttons in the Options bar: 


a Bring to Front to move the selected slice or slices to the front of the stack. 
a Bring Forward to move the selected slice or slices forward by one. 

a Send Backward to move the selected slice or slices back by one. 

a Send to Back to move the selected slice or slices to the back of the stack. 


You also can select Arrange from the Slices menu and select one of the four arrang- 
ing options. 


Once the slices are positioned properly and are available for editing, you can set the 
options to control the display of the slices. 


SETTING SLICE OPTIONS 


Creating and positioning slices is only half your work; you still need to determine how 
the slices will appear in the final graphic. You use some slices as linked images, and oth- 
ers as empty space. Control the display of slices in HTML by deciding whether to use 
text or an image in the slice. Optimize the images and add effects such as rollovers or 
animation. Then save the images and HTML. 


Controlling the Display of Slices in HTML 


With the slices in position, for each slice determine whether to use an image or HTML 
color and text. Many slices will act as buttons, and need to be linked with HTML anchor 
tags. You can also add text that appears in the status bar when a user points to a slice. 


Choosing a Content Type 


Part of the advantage of using image slices rather than image maps or other large images is 
that you can replace portions of the sliced image with solid color or HTML text. This means 
users need to download one less file and can load the page faster. A slice contains either a 
piece of the original image or some combination of text, HTML color, and empty space. 
The content type of a slice—Image or No Image—determines whether the slice will be 
saved as an image or as text and color. Image is the default content type. ImageReady and 
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Photoshop save blank slices as images unless you specify that they are No Image content. 
Specifying the empty slices as Image content can be inefficient, as you might force the user 
to download several separate images that contain nothing but blank space. 


To set slices as non-image slices: 
1. Open apples.tif from the Data Disk. 


2. Use the Slice tool to create slices around the three image areas. Do not select 
the white columns. You should see five slices: the three user-slices you 
defined, and two auto-slices around the white areas. 


You do not have to save the white areas as images because they contain no 
image information. 


3. Select the two auto-slices and then select No Image from the Type menu in 
the Slice palette. To do the same in Photoshop, double-click the slice to open 
the Slice Options dialog box. Then select No Image in the Type list and 
click OK. Doing this means the HTML table that is generated to display the 
image slices will leave these areas blank. 


4. Leave the apples.tif file open. 


Photoshop and ImageReady do not display No Image slice content. To view No Image 
slice content, preview the image in a browser. Slice symbols indicate whether a user-slice 
is an Image or No Image slice. 


Adding HTML Text to a Slice 


When you choose a content type of No Image, the Slice Options dialog box in Photoshop 
and the Slice palette in ImageReady display a large text field where you can enter text and 
HTML that will appear in place of an image. This text field is shown in Figure 12-15. 
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Figure 12-1415 The Slice palette with Type set to No Image 


You can use HTML tags to set the font and color of the text. You also can use IMG tags 
or add HTML tables, though the slice probably doesn’t provide enough room to do so. 
If you add too much text, the slice expands to fit the text and pushes the adjacent slices 
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over, disturbing the layout, as shown in Figure 12-16. Because the text is in HTML, 
white space is ignored by the browser. If you want to include carriage returns in the 
text, you must explicitly define them with a P, DIV, or BR tag. Any carriage returns you 
simply type in the text field are ignored. 


Figure 12-16 A sliced image with too much text in a No Image slice 


When an image contains text in slices, you should preview it in a browser, not just in 
Photoshop or ImageReady. Different browsers display slice text at slightly different sizes. 
Any text you add could fit easily within the slice when viewed with one browser, but 
not in another. Preview sliced images in as many browsers and systems as possible. 
Although Netscape and Internet Explorer display text with only slight differences, Macs 
and Windows systems display text with major differences. Windows systems usually dis- 
play larger text than do Macintosh systems. If you are using a Mac to create slices with 
text, be sure to preview the layout on a Windows computer. 


In ImageReady and in the Save for Web dialog box in Photoshop, you also have the option 
of setting cell alignment for slices that do not contain images. After you save the slices, they 
are displayed in a normal HTML table in a Web page. You can set table cell attributes as 
you do when you create tables by hand or with a WYSIWYG editor. Under the Cell 
Alignment area of the Slice palette, select from the following options in the Horiz list: 


a Default to use the browser’s default for horizontal alignment. The default is 
usually to left-align the contents of table cells. 


a Left to align the text at the left side of the table cell 
a Center to align the text at the center of the table cell 
a Right to align the text at the right side of the table cell 
You also can align the text vertically by selecting an option from the Vert list: 


a Default to use the browser’s default for vertical alignment. In some browsers 
the default is to vertically align text in the center of a table cell. In other 
browsers the default is to align it at the top. 


a Top to align the text at the top of the table cell 


a Baseline is not supported in all browsers. It usually results in text being 
aligned at the bottom of the table cell. 
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a Middle to center the text vertically in the table cell 


a Bottom to align the text at the bottom of the table cell 


Specifying Slice Background Colors 


If you choose a content type of No Image, you might want to set a background color so 
the slice blends in with the other slices. You also should set the background color for slices 
that contain transparent areas. You can change slice background colors in ImageReady and 
in the Save for Web dialog box in Photoshop. 


To choose a background color in ImageReady: 
1. Select both of the white slices in apples.tif. 
2. Set the foreground color to black. 


3. In the Slice palette, select Foreground Color from the Background menu. 
The list of options is described below: 


a None to set no background color and leave the slice transparent 
a Matte to use the Matte color specified in the Optimize palette 


a Foreground Color to set the background of the slice to the current 
foreground color 


a Background Color to set the background of the slice to the current 
background color 


a Other to open the Color Picker dialog box, from where you can define a 
specific color 


m One of the preset colors to assign a color 
4. Preview the image in a browser. The white columns should appear black. 


To choose a background color in the Save for Web dialog box in Photoshop, select a 
slice. Double-click a slice with the Slice Select tool to open the Slice Options dialog 
box and make a selection from the Background menu: 


a None to set no background color and leave the slice transparent 
a Matte to use the Matte color specified in the Optimize palette 


a Eyedropper to set the background of the slice to the current color in the 
Eyedropper sample box 


a White to use a white background 
a Black to use a black background 


a Other to open the Color Picker dialog box, from which you can define a 
specific color 


You cannot preview the slice background color in either Photoshop or ImageReady. 
Preview the image in a browser to see the changes. 
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Assigning a URL to a Slice 
To make a slice a link to another page, you need to assign a URL to the slice. 
To apply a hyperlink to an image slice: 

1. Select the first slice in apples.tif. 


2. In the Slice palette, set the Type to No Image. Note that there is no URL 
text field available in the Slice palette. The hyperlinking option is not avail- 
able for slices with a No Image content type. Slices that do not contain 
images can contain normal hypertext links, but you must type the HTML 
directly into the Text text box. 


3. Set the Type to Image. Note that three text fields become available: Name, 
URL, and Target. 


4. If you are adding rollover effects to a slice, the slice needs a name. Otherwise you 
can ignore this field. Slices have default names, such as Untitled-1_03 that are 
based on the number of the slice. You can use these names or assign new ones. 


5. Type a URL into the URL field. The URL can take the form: 
“http://www.mysite.com” if you want to link to another Web site, or take the 
form “/index.html” if you want to link to another page on the same Web site. 
If you leave this field blank, the slice will appear as a normal, unlinked image. 


6. Once you assign a URL to a slice, the Target field becomes visible. The target 
tells the browser where to open the page identified in the URL field. By 
default, the target field is left empty. This causes any URL to open in the same 
browser window or frame as the image slice. In addition to leaving the Target 
field empty, you can click the list arrow and choose one of four options: 


a _blank to open the new page in a new browser window. You also can type 
any other name to achieve the same effect. 


a _self to open the new page in the same window or frame as the location 
of the image slice. This is the same as leaving the target empty. 


m _parent and _top if you use HTML frames in your site. Choosing one of 
these options for the target causes all frames to be replaced with the new page. 


7. Leave the apples.tif file open. 


In general, you can leave the Target field empty, and edit the HTML after the file is 
generated. 


Specifying Browser Messages 


Image slices are separate Web images, and like any other graphics in a Web page they can 
display alternate text that appears if the image does not load or when the user rolls the 
pointer over them. Additionally, ImageReady includes a feature that displays a text mes- 
sage in the status bar of the browser. 
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To add alternate and message text for a slice: 


1. Preview apples.tif in a Web browser. When you roll your mouse pointer over 
the left image slice, the URL you entered should appear in the status bar of 
the browser. 


2. In ImageReady, expand the Slice palette if it is not already expanded by 
selecting Show Options from the Slice palette menu, or by clicking the 
arrows in the tab on the Slice palette. This exposes the Dimensions and mes- 
sage areas of the palette. 


3. In the Alt text box in the Slices palette, type blue tree. This text is inserted as 
the value of the ALT attribute in the IMG tag used to display the image slice. 


4. Preview the image in a browser again. In most browsers, a small text box 
should appear containing the words “blue tree” when you roll your pointer 
over the slice. This text will also appear in place of the image if it fails to 
load on the user’s browser. 


5. In the Message text box, type Click here for more information. 


6. Preview the image in a browser again. This time when you roll your pointer 
over the slice, the status bar displays the message text instead of the URL. 


By default, if the image slice has a link, the status bar displays the URL of the link. 
Photoshop and ImageReady can generate special JavaScript that displays a message in 
the browser’s status bar when the user rolls over an image slice. When you include 
message text, the message is displayed instead of the URL. The slice does not need to 
have a link to use this feature. You may want to use this feature to add explanatory 
text for each image. 


Any image can have the feature of displaying text in the status bar. However, in 
ImageReady only the Slice palette offers status bar messages as an option. If you want 
other images or even text links to have rollover messages, use the following HTML code: 


<a href="http://www.course.com" 
ONMOUSEOVER="Window.status='this is your message'; 
return true;" 
ONMOUSEOUT="window.status="; return true;"> </a> 


Alternately, you can add a message to a slice in ImageReady, and then preview the image 
in a browser and copy the code that appears. This is a type of rollover effect. For more infor- 
mation on creating rollover effects, see the chapter on Creating Image Rollover Effects. 


Working with the Images in Slices 


Like other Web graphics, image slices need to be optimized and can contain the rollover 
and animation effects. If you have many similar image slices in one large graphic, you 
can link the slices together to share optimization and effects settings. 
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Optimizing Slices 


One of the most important reasons to use image slices instead of large, single images is 
that you can optimize each image slice separately. You can optimize image slices such as 
photographic images so that they have low JPEG compression, and save other image 
slices as 8-bit GIFs, 1-bit GIFs, or with another optimization setting. 


When you slice an image, every new slice inherits the optimization settings of the orig- 
inal image unless you specify different settings. 


Because the original image files tend to be large, and because you normally use many 
image slices, the total file size for all image slices is often high. You should optimize each 
slice as much as possible. Before making any slices, optimize the original file with high 
JPEG compression. Any slice you make will also have that compression setting. If nec- 
essary, you can reduce the optimization settings. 


You can optimize image slices like any other image. In Photoshop, use the Save for Web 
dialog box and in ImageReady, use the Optimize palette. 


If you select multiple slices that have different optimization settings, some controls are 
disabled. Only the menus and text fields that apply to the settings for all selected slices 
are enabled. 


In ImageReady, you can copy optimization settings between slices. Select the slice with 
optimization settings you want to copy. Find the droplet icon in the Optimize palette 
and drag it to the slice that you want to optimize. 


Linking Slices in ImageReady 


In ImageReady you can link slices together in the same way you link layers together 
in the Layers palette. Optimizing a linked slice applies the same settings to all other 
slices in the same link set. Although you cannot actually link slices together using 
Photoshop, you can optimize linked slices together in Photoshop using the Save for 
Web dialog box. 


If you duplicate a linked slice, the new slice is automatically included in the same link 
set. Linking slices is not the same as combining them. Combining slices actually makes 
one new slice out of two or more slices. Linking slices leaves them separate. 


One advantage to linking slices is avoiding the inconvenience of having to optimize 
individual slices. The main advantage, however, is that linked slices share the same color 
palette and dither pattern. If you optimize individual image slices as GIFs with reduced 
colors, each slice uses its own palette and dither pattern. This can result in visible seams 
between adjacent slices, as shown in Figure 12-17. Linking slices avoids this problem. 
In the top image, each slice is reduced to 12 colors. In the bottom image, the slices 
are linked and collectively reduced to 12 colors. 
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Optimizing each slice separately results in obvious divisions 
between slices 


Optimizing slices collectively results in more dithering, but 
no obvious divisions between slices 


Figure 12-17 Unlinked slices with different optimization settings 


To link and optimize slices: 
1. In apples.tif, select slices 01 and 03. 
2. Select Link Slices from the Slices menu. 


3. To link slices, select two or more slices and select Link Slices from the Slices 
menu. The color of the slice symbols should turn red. 


4. Select slice 01. 


5. In the Optimize palette, select the JPEG Medium setting. Because the slice 
is linked, slice 03 is automatically optimized the same way. 


If you link user-slices and auto-slices together, the auto-slices convert to user-slices. 
Optimizing slices should be one of the last steps in preparing image slices, and you should 
link slices together only when you are ready to optimize them. 


If you change your mind about linking a slice, you can unlink it by selecting Unlink Slices 
from the Slices menu. To unlink all slices in a link set, select Unlink Set from the Slices menu. 
To unlink all slices in an image, select Unlink All from the Slices menu. 


Adding Effects to Slices 


You can easily add rollover and animation effects to individual slices, though the file size 
increases with each effect you add. A sliced image with animations and rollover effects 
in every slice can easily develop such a large file size that you will not want to use it 
in a Web page. 
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It is easier to create rollovers and animations in image slices when you use layer-based 
slices. These types of slices automatically resize based on the contents of the layers. If you 
create animations or rollovers using user-slices, you will have to manually resize the slice 
if the animation or rollover effect extends beyond the area defined by the slice. 


Before you create effects, make sure you have all the necessary layers prepared for the 
different rollover states or animation frames. 


Copy the image selection for each rollover state or animation frame as separate layers, 
then create slices from those layers. Then edit the layer to include the rollover or ani- 
mation effect. The slice automatically resizes if necessary. 


The last step is to actually apply the rollover or animation. Adjust the visibility of the 
layers so that the overall image appears in its initial state. Select the slice where you want 
to add the effect. Then show the Rollover or Animation palette and create additional 
states or frames. With a new state or frame selected, make the appropriate layers visible. 


To animate an image slice: 
1. In apples.tif, select the right-most slice with the Slice Select tool. 


2. The slice will be animated, so it must be saved as a GIF Because the image 
has a lot of texture, you can use a lot of color reduction without any notice- 
able effect. In the Optimize palette, select the GIF 64 Dithered setting. 


3. Click Select on the menu bar, then click Create Selection from Slice. 
This creates a rectangular selection area based on the selected slice. 


4. Copy the selection and paste it in a new layer. If necessary, use the Move tool 
to position the new layer to the right of the image. 


5. Use the Hue/Saturation dialog box to set the hue of the new layer to 120. 
6. Show the Animation palette and duplicate the first frame. 


7. Make sure the first frame shows only the bottom layer and the second frame 
shows both layers. 


8. Set the delay for both frames to 0 seconds and set the looping to Forever. 


9. Preview the image in a browser. The right third of the image should appear 
to shimmer. 


Saving the Images and HTML 


More than with any other type of graphic created with ImageReady or Photoshop, 
sliced images rely on the HTML that is generated by the software. You copy this HTML 
into the final page after you save the image. 


Before saving the image, adjust the output settings. Point to Output Settings on the File menu 
and select HTML. This opens the Output Settings dialog box, shown in Figure 12-18. From 
there select one of the submenus: HTML, Background, Saving Files, or Slices. Regardless of 
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which you choose, you can access the other three from the same dialog box. Click the but- 
tons marked Prev or Next to cycle through the four windows. The Settings menu at the top 
should be set to Custom. This allows you to edit the settings. 


Output Settings 


pererencedi z | 
GIF, IMG W&H ~| 
ao ato 


| Client-Side v| 


Figure 12-18 The Output Settings dialog box 


Setting HTML Options 


In the Formatting area of the dialog box,j you can choose the coding style for the final 
HTML. Different Web servers and browsers accept slightly different standards of HTML, 
so it is best to format the HTML to make it compatible across platforms. Next to the Tags 
Case you can choose BODY, Body, or body. This sets the code to uppercase, sentence-case, 
or lowercase, respectively. The latest specification for HTML requires lowercase for all 
HTML tags. You can also set the case of the attributes from the Attribs Case menu. 


ImageReady can indent the generated HTML to make it easier to read. However, every 
character, including tabs and spaces, that you add to an HTML file increases its file size by 
one byte. Although browsers ignore this white space, it still contributes to file size. Next 
to Indent, you can choose how much to indent the HTML. Selecting Tabs or one of the 
spaces options makes the final code easier for you to read. However, choosing None cre- 
ates a smaller file. 


Most Web servers that serve your Web files use the UNIX operating system. To have 
your code be compatible with the UNIX system, select UNIX from the Line 
Endings menu. 
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If you select the Always Quote Attributes check box, the HTML will include double quo- 
tation marks around every attribute. This adds a significant number of extra characters to 
the HTML, but makes it more universally compliant, so even very old Web browsers will 
be able to display the HTML properly. 


In the Coding area, you can choose to include HTML comments and GoLive code. Again, 
the comments make the HTML easier to read, but also increase the download time. You 
should include GoLive code only if you use Adobe GoLive to edit your HTML pages. 


In the Slice Output area, you can choose to display the slices as positioned HTML layers 
or in a table. Select Generate CSS to lay out the image slices in separate HTML layers rather 
than in a table. Although most of the recent browsers support positioned layers, many older 
ones do not. To be compliant with older browsers you should select Generate Table. If any 
of your slices are set to a content type of No Image, you need to specify how those table 
cells will be filled. Under the Empty Cells menu, choose one of the first two options, either 
GIF IMG W&H or GIETD W&H. These both place 1-pixel transparent GIFs in the cell, 
stretched to the appropriate size. The third option, NoWrap, TD W&H, uses a nonstandard 
attribute that is ignored in some browsers. 


Some browsers do not align tables properly, even when you create them with standard 
HTML. Even if the final image looks fine on your browser, it might still split on others. 
The term breaking tables refers to tables with unwanted margins between rows or columns 
of image slices. This is more common with especially complicated layouts. To avoid broken 
tables, you should require the table cells to use WIDTH and HEIGHT attributes. Do this 
by selecting Always from the TD W&H menu. You can also select Auto to have ImageReady 
decide whether to add these attributes. Do not select None. You can also avoid broken tables 
by having ImageReady add invisible table rows and columns around the completed table 
layout. However, this can slow the rendering of the layout, and is often not necessary. Choose 
Auto to have ImageReady add these rows and columns only when necessary. 


Setting Background Options 


Click Next in the Output Settings dialog box to display options for saving backgrounds. 
You can define a background color or image to include in the body of the generated 
HTML. This color or image will show through any transparent areas in the image slices. 
The color appears in the body, not the table that controls the layout, however, so you 
will probably not want to use this option. If you do, click Choose to browse and select 
a GIE JPEG, or PNG to use as the background, or choose a color from the Color list. 


Setting File Options 


Click Next on page 2 of the Output Settings dialog box or select Saving Files from the 
second list menu to set options for file naming. Information on how to save multiple files 
is provided in the chapter on creating thumbnail galleries. Choose names for the individ- 
ual image slices based on the slice name, document name, date, number, or letter. You can 
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also include information about the rollover state or trigger name. The trigger name refers 
to the image that, when rolled over, triggers a rollover effect. 


To be as compatible as possible with all systems, select all available systems in the File Name 
Compatibility area. 


In the Optimized Files area, select Put Images in Folder and type a name in the text field. 
The individual image slices will be saved in a folder with this name. 


Select Include Copyright to include copyright information for images. You must add this 
information yourself using the Image Info or File Info dialog box. 


Setting Slice Naming Preferences 


Click Next in the Output Setting dialog box to display options for saving slices. You 
can specify the file naming conventions for slices in the Output Setting dialog box 
or the previous one. Setting options in one window overrides the settings from the 
other one. 


When you save a sliced image, each slice is saved as a separate file, and the software 
produces HTML based on your chosen output settings. You often need to use a text 
editor or WYSIWYG HTML editor to edit the HTML produced by Photoshop or 
ImageR eady. 


To save apples.tif: 


1. Review the options for saving sliced images and HTML. 


2. Click File on the menu bar, and then click Save Optimized As. Make sure 
the format box or the Save as type box is set to HTML and Images (*.html) 
so that both the images and the HTML file are saved. 


3. Create and select a new folder named apples. 


4. Enter the filename apples.html for the HTML file and click Save. The 
images are saved and named, based on the slice numbers and the settings in 
the Output Settings dialog box. 


CREATING SLICED IMAGES MANUALLY 


If you do not have current versions of Photoshop or ImageReady, you might need to 
create sliced images by hand. You can split the images into several smaller ones and place 
them in a grid using HTML tables. This allows you to optimize each portion separately, 
and to animate or create rollovers for individual portions. 


Most layouts require hand-tuning to keep the file sizes minimized. Even if you use 
Photoshop or ImageReady, you should understand how to slice images manually. 
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Slicing Images 


Creating slices manually is similar to using ImageReady, but instead of relying on the 
Slice tool, you must crop each slice individually. Then you must also code the necessary 
HTML so that the images appear without gaps in a Web browser. 


To prepare for slicing images, determine how many images you must create out of the 
original. To streamline the process of creating slices, create as few images as possible 
without sacrificing the benefits of using sliced images—being able to optimize, animate, 
and link pieces of a large image separately. 


Use guides to plan where you will make the slices. Position the guides to surround 
important areas that will be used for rollovers or animations, or areas which require dif- 
ferent optimization settings from the rest of the image. Also use the guides to exclude 
areas of solid color. These can be replaced by transparent images. You can use one small 
transparent image for all empty slices. Most designers have one image for every layout 
project, often named clear.gif, that isa 1 X 1 pixel GIF with no color, just transparency. 


Cropping Slices 


The next step is to use the Crop tool to save each piece as a separate image. To control 
the cropping, enable Snap under the View menu. Before cropping the first slice, save the 
image as a PSD file. This maintains all guides in place, even after closing and reopening 
the image. Choose a slice and crop it with the Crop tool. Then optimize it as necessary 
and save. You do not need to crop the empty corner pieces. Be careful not to vary the 
optimization methods too widely, and not to alter the appearance of the slices after they 
are separated. When put in place in the table they might not match. 


Positioning Images in Tables 


Unlike the areas in image maps, image slices can only be rectangular. The images inside indi- 
vidual table cells can have any shape, but the linked area is the full area defined by the cell. 


When you put your slices in table cells in a table, the first thing you will see is that there is 
a margin surrounding every image.The following code produces the image in Figure 12-19: 


<table> 

<tr><!--row 1--> 

<td colspan="3"> 

<img src="top slice.gif"> 
</td> ~ 

</tr> 

<tr><!--row 2--> 

<td> 

<img src="left_ slice.gif"> 
</td> 

<td> 

<img src="center_ slice.gif"> 
</td> 
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<td> 

<img src="right_slice.gif"> 
</td> 

</tr> 

<tr><!--row 3--> 

<td colspan="3"> 

<img src="bottom_slice.gif"> 
</td> 

</tr> 

</table> 


O 


Figure 12-19 A sliced image with visible margins 


Just like when you created the tabbed interface in the chapter on buttons, you need to set 
the BORDER, CELLPADDING, and CELLSPACING attributes of the TABLE tag to 0. 
You also need to eliminate the spacing between the IMG tags and the TD tags. The proper 
code is shown below and makes the boundaries between the image seamless and invisible. 


In the previous coding example, the empty corner images were left out. Sometimes extra 
space in table cells will force those cells to be taller or wider than you want. To prevent 
this, use transparent GIFs to fill the space. 


The following code produces the image in Figure 12-20: 


<table border="0" cellpadding="0" cellspacing="0"> 
<tr><!--row 1--> 

<td colspan="3"><img src="top slice.gif"></td> 
</tr> 

<tr><!--row 2--> 

<td><img src="left_slice.gif"></td> 

<td><img src="center slice.gif"></td> 

<td><img src="right_slice.gif"></td> 

</tr> 

<tr><!--row 3--> 

<td colspan="3"><img src="bottom slice.gif"></td> 
</tr> 7 

</table> 
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Figure 12-20 A sliced image with no visible margins 


Some browsers may still add margins between or around the images. You should also 
specify the height and width of each sliced image. You can set the dimensions either 
in the IMG tags, in the TD tags, or both. This is especially needed if the images used 
are of different sizes. To be safe you should also define the height and width of the 
TABLE tag. 


The following code contains additional safeguards to ensure the table does not break: 


<table border="0" cellpadding="0" cellspacing="0" 
height="240" width="320"> 

<tr><!--row 1--> 

<td height="23" width="67"><img src="clear.gif" 
height="23" width="67"></td> 

<td height="23" width="167"><img src="top_slice.gif" 
height="23" width="167"></td> 

<td height="23" width="66"><img src="clear.gif" 
height="23" width="66"></td> 

</tr> 

<tr><!--row 2--> 

<td height="171" width="67"><img src="left_slice.gif" 
height="171" width="67"></td> 

<td height="171" width="167"><img 

src="center slice.gif" height="171" width="167"></td> 
<td height="171" width="66"><img src="right_slice.gif" 
height="171" width="66"></td> 

</tr> 

<tr><!--row 3--> 

<td height="130" width="67"><img src="clear.gif" 
height="130" width="67"></td> 

<td height="130" width="167"><img src="bottom_slice.gif" 
height="130" width="167"></td> 

<td height="130" width="66"><img src="clear.gif" 
height="130" width="66"></td> 

</tr> 

</table> 
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Note how all cells and images in a row must have the same height, and all cells and 
images in the same column must have the same width. 


One drawback to using ImageReady to make slices is that it is not intelligent enough to 
use HTML sparingly. A complex table may have a few kilobytes of HTML just to posi- 
tion the slices. Every character takes up one byte of memory. The following line of code: 


<img src="/images/blue_moon.gif" width="36" height="42" 
name="blue_ moon" alt="Blue Moon over Miami" 
usesrc="moon2.gif"> 


Would take up 119 bytes on a Web page, about a tenth of a kilobyte. This may not seem 
like a lot, but you should always keep your graphics, and the HTML that displays them 
as lean as possible. 


With the skills learned in this chapter, as well as those in the previous ones, you are ready 
to start looking for a job as a professional graphic designer. 


CHAPTER SUMMARY 


o Slices are rectangular pieces of an image that can be positioned in an HTML 
table to re-create the original image. 


o Although you can create many slices from the original, too many slices will 
delay the loading and rendering of the layout. 


o A slice can contain empty space or text instead of an image. Using empty 


spaces in a slice helps to minimize total file size. 


o Each slice can be optimized separately, and can contain animation and rollover 
effects that are separate from the other slices. 


a In Photoshop and ImageReady, you can create user-slices using the Slice tool, 
or layer-based slices from the contents of layers. User-based slices are easier 
to edit. Layer-based slices are better for adding animation or rollover effects 
to a slice. Layer-based slices resize according to the contents of the associated layer. 


a ImageReady and Photoshop automatically fill in any remaining space with 
auto-slices. Auto-slices automatically resize if necessary whenever you change 
the size or position of other slices. 


a Use the Preferences dialog box to adjust the appearance of slices in ImageReady. 


I Edit existing slices by moving them, changing their size, or dividing them into 
smaller slices. 


a Image slices are like other Web graphics and can be linked as well as display 
alternate text. 


a When creating image slices manually, make sure to use proper HTML to 
ensure no broken tables. 
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REVIEW QUESTIONS 


1. Which of the following statements is true? 


a. Slices can be a different format from the original image, and can have different 
optimization settings. 


b. Slices can be a different format from the original image, but must have the 
same optimization settings. 


c. Slices must be the same format as the original image, and must have the same 
optimization settings. 


d. Slices must be the same format as the original image, but can have different 
optimization settings. 


. How do you convert a user-slice to an auto-slice? 


a. First convert it to a layer-based slice, then to an auto-slice. 
b. Use the Convert to Layer-Based Slice command. 
c. This cannot be done. 


d. This is unnecessary because auto-slices are a specific type of user-slice. 


. Which of the following is not a way to promote an auto-slice to a user-slice? 


a. Dividing the auto-slice 
b. Selecting the auto-slice 
c. Setting options for the auto-slice 


d. Using the Promote to User Slice command 


. Which of the following statements is true? 


a. Creating a slice from a selection creates a user-slice surrounded by auto-slices. 
b. Creating a slice from a selection deletes any existing slices. 
c. Creating slices from guides creates a user-slice surrounded by auto-slices. 


d. Creating slices from guides deletes any existing slices. 


. Which of the following determines the numbers in the upper-left corner of slices? 


a. The order in which the slices were created 

b. The size of the slices from largest to smallest 

c. The stacking order of the slices 

d. Numbering is from left to right and from top to bottom of the image. 


10. 


11. 
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. Which of the following is never a way to reduce the number of auto-slices in 


an image? 

a. Aligning slices 

b. Arranging slices 
c. Combining slices 


d. Distributing slices 


. What does the symbol in the upper-left corner of the slice not tell you about 


the slice? 

a. The content type 

b. The stacking position 

c. Whether it is a user-slice, a layer-based slice, or an auto-slice 


d. Whether it is linked to another slice 


. How do you divide a layer-based slice? 


a. First convert it to an auto-slice. 
b. First convert it to a user-slice. 
c. It cannot be done. 


d. Select Divide Slice from the Slices menu. 


. What happens when slices overlap? 


a. A new auto-slice is created in the overlapping area. 
b. A new user-slice is created in the overlapping area. 
c. The slice with the higher stacking order takes precedence. 
d. The slice with the lower stacking order takes precedence. 


Which of the following is one way to move the left side of a user-slice farther to 
the left? 


a. Lower the W value in the Slice palette. 

b. Lower the X value in the Slice palette. 

c. Raise the W value in the Slice palette. 

d. Raise the X value in the Slice palette. 

What command spreads slices to reduce crowding? 
a. Align 

b. Combine 

c. Distribute 

d. Divide 
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12. 


T3. 


14. 


15. 


16. 


17. 


How do you add a hyperlink to a slice that does not have image content? 
a. These types of slices cannot contain links. 

b. Type the anchor tag manually. 

c. Type the URL in the URL field. 

d. Use the Link command. 


Which of the following fields in the Slice palette contains text that appears in the 
browser’s status bar? 


a. Alt only 

b. Message only 

c. URL only 

d. Either Message or URL 


Which of the following is a way you can make the HTML that ImageReady cre- 
ates easier to read later, but does not increase the size of the HTML file? 


a. Include comments. 

b. Indent text. 

c. Use uppercase tags and attributes. 
d. They all increase file size. 


Which of the following is not a way to make the HTML compatible with most 
browsers and operating systems? 


a. Include GoLive code 

b. Quote attributes 

c. Unix line endings 

d. Windows, Mac, and UNIX filename-compatibility 


Why should you not select Generate CSS in the Slice Output area of the Output 
settings dialog box? 


a. This causes the slices to be positioned in HTML layers, which are not sup- 
ported by all browsers. 


b. This causes the slices to be positioned in HTML layers, which causes bro- 
ken tables. 


c. This generates style sheets, which are not supported on all operating systems. 
d. This generates style sheets, which increase the HTML file size unnecessarily. 
Which of the following is not a cross-browser way to avoid broken tables? 

a. Using HEIGHT and WIDTH attributes in the images 

b. Using HEIGHT and WIDTH attributes in the table cells 

c. Using spacer GIFs in empty table cells 

d. Using the NOWRAP attribute in table cells 
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18. What table does this line of HTML produce? 


19. 


20. 


<table><tr><td colspan="2"></td></tr> 
<tr><td></td><td></td></tr></table> 


a. Three cells next to each other, with the first cell from the left cell twice as wide 
b. Two columns, with one cell in the left column and two cells in the right column 
c. Two rows, with one cell in the top row and two cells in the bottom row 

d. Four cells ina 2 X 2 grid 


What attribute of the TABLE tag must not be set to guarantee that the image 
slices are adjacent, with no breaks? 


a. WIDTH 

b. BORDER 

c. CELLPADDING 
d. CELLSPACING 


What value for the CELLPADDING attribute of the TABLE tag helps guarantee 
no broken tables? 


a. O 

b. 0% 
c. 1 

d. 100% 


HANDS-ON PROJECTS 


Project 1: Analyze Sliced Images Online 


Aaen A good way to learn about Web graphics is to see what other designers are doing. Find 
examples of sliced images on the Web and compare them with what you want to do. 


1. 


ND wo sf 


Find at least three Web sites that use a sliced image. Make sure it is not an image 
map or Flash movie. 


. View the HTML source of the pages and find the code for the image slices. It 


will be a table with many IMG tags in it. How much HTML code do they use to 
create the slices? 


. Download each image slice to your desktop and add up the file sizes. What is the 


total file size for each of the sites you found? 


. How many images are used in each project? 
. Do they incorporate rollover effects and animation? 
. Do they use different optimization settings for each slice? 


. Do they use HTML instead of images when possible? 
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Project 2: Slice an Image 


Another designer has given you an image to slice. The layers have been flattened, so you 
have to use the Slice tool. 


Complete the following steps: 
1. In ImageReady, open flowerShopNav.tif from the Data Disk. 


2. With the Slice tool, create a slice that completely encloses the gray rectangle and 
all the text. 


3. Optimize the slice using high-quality JPEG compression. 


4. From the Slices menu, select Divide Slice. In the dialog box, set the slice to 
divide horizontally into 3 slices down, evenly spaced. 


5. Select the slice containing the word Roses. In the Slice palette, enter the URL 
roses. html. In the Message and Alt text fields, type Roses. Do the same for the 
other two user-slices, using the appropriate words. 


. Create another slice that completely encloses the flower. 
. Optimize the slice using medium-quality JPEG compression. 


. Optimize all the other slices by reducing colors to 3 bits. 


oOo CO NID 


. Add an Easter egg by first selecting one of the thin slices. In the Message field of 
the Slice palette, type Produced by: and then type your name. 


10. Preview the image in a browser and check to see that the links work and the 
messages display correctly. 


11. Save the images and HTML in a new folder named project_12-2. Save the 
HTML file as flowerShopNav.html. The images will be named automatically. 


Project 3: Slice an Image for Better Optimizing 


You have an image that is too large. Optimizing it causes degradation of quality, however. 
Slice the image so that you can optimize certain areas with greater compression than others. 


Complete the following steps: 
1. In ImageReady, open crossball.tif from the Data Disk. 


2. Select the Magic Wand tool. Set the Tolerance to 100. Select the ball. You may 
have to [Shift + click] click a few times to select the whole ball. 


3. From the Slices menu, select Create Slice from Selection. This creates a user 
slice that exactly fits the ball, and four auto-slices. 


4. With the Magic Wand tool, select the white area in the upper-left corner. From 
the Slices menu, select Create Slice from Selection. Do the same for the other 
three corners. 


5. The image should have nine slices. If you see more than nine, adjust the slice 
edges to reduce the number of auto-slices. 


Project 
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. The four corner slices contain no image information. In the Slice palette, set 


them to the type No Image. 


. The four slices that contain only white, black, and green can all be reduced to just 


three colors. Select the slices and reduce their color table to three colors in the 
Optimize palette. 


8. Select the middle slice containing the ball and set it to medium JPEG compression. 


9. Preview the image in a browser and save the images and HTML to a new folder 


named project_12-3. Save the HTML file as crossball. html. 


Project 4: Replace Graphical Text with HTML 


You have an image that contains text as part of the graphic. Replace this text with 
regular text in HTML to reduce the file size. 


Complete the following steps: 


1. 
2. 


In ImageReady, open stop.tif from the Data Disk. 


Create a slice surrounding the text. Enlarge the slice so that it is as large as possi- 
ble without crossing the white stripe. 


. Select the center slice. In the Slice palette, set the type to No Image. 
. Set the background color to the same shade of red in the image. 


. In the area labeled Text, type the following HTML: 


<font color="white" face="arial"> 

<font size="5"><b>STOP</b></font> 

<br> 

<font size="6">Please Read Before You Continue</font> 
</font> 


. Set the horizontal cell alignment to Center. Set the vertical cell alignment 


to Middle. 


. Select the surrounding auto-slices and optimize them as reduced-color GIFs. The 


total file size for the image should be under 1 KB. 


. Preview in a browser. The text causes the table to break. Reduce the lower font 


size to 3 and preview again. 


. Save the images and HTML in a new folder named project_12-4. Save the 


HTML file as stop.html. The images will be named automatically. 


Project 5: Animate an Image Slice 


You have a simple drawing to which you want to add some animation. The moving area 
is only in one part of the image. Animating the entire image would produce a large file. 
Create a slice for the area where the animation takes place and animate only that slice. 


Complete the following steps: 


1. 


In ImageReady, open fish.tif and bubbles.tif from the Data Disk. 
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. Copy all pixels in bubbles.tif and paste as a new layer in fish.tif. Position the bub- 


bles near the mouth of the fish. 


. Select the layer containing the bubbles. From the Layer menu, select New 


Layer Based Slice. This generates a layer-based slice around the bubbles, and 
four auto-slices. 


. Show the Animation palette. Duplicate the first frame. Select the duplicated frame. 
. Select the Move tool. Move the bubbles about 40 pixels up so that the top of the 


slice is above the top fin. 


. Set the opacity of the bubbles to 0% for the second frame. Disable visibility for 


the layer. 


. Set the opacity of the bubbles to 100% for the first frame. 
. Click the Tween button on the Animation palette. Select All Layers, all 


parameters, and add 2 frames. The two intermediate frames should show 
opacity of 67% and 33% for the bubbles layer. 


. Set the delay of the first three frames to 0.1 second. Set the delay of the fourth 


frame to 2 seconds. 


. Select slice 01. In the Slice palette, select No Image as the type. Do the same for 


slices 02 and 05. 


. Select slice 03. In the Optimize palette, choose the preset named 


GIF 32 No Dither. 


. Select slice 04. In the Optimize palette, choose the preset named JPEG Medium. 


. Preview the image in a browser. You should see bubbles appear at the fish’s mouth 


and disappear as they float upward. 


. Save the images and HTML to a new folder named project_12-5. Save the 


HTML file as fish. html. 


Project 6: Edit an Existing Sliced Image 


Another designer created a sliced image for a Web project, but did not quite finish. Edit 


the project. 


Complete the following steps: 


1. 
2. 
J: 


In ImageReady, open screen.psd from the Data Disk. 
Preview the image in a browser to see its functionality. 


The white squares do not have the same texture as the rest of the image and 
should be edited. Find the layer containing the white squares in the Layers palette. 
Select it and make it visible. 


. Click Filter on the menu bar, point to Distort, and then click Ripple. 
. Set the Amount to 100% and the Size to Large. 


. Click Filter on the menu bar, point to Texture, and then click Craquelure. 
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7. Set the Spacing to 15, the Depth to 6, and the Brightness to 9. 


8. Select all the slices that contain some text. Optimize them with medium JPEG 
compression. 


9. Select all the slices that do not contain text. Optimize them with high JPEG 
compression (low quality). 


10. Preview the sliced image in a browser. 


11. Save the images and HTML to a new folder named project_12-6. Save the 
HTML file as screen. html. 


Project 7: Manually Edit a Sliced Image 


When using a background, ImageReady forces every slice to contain a piece of the back- 
ground, even if there is no other image information. You can manually edit the resultant 
HTML to add a background image to the whole table, allowing many slices to contain 
nothing, thus saving file size. 
Complete the following steps: 

1. Open undersea.tif from the Data Disk, optimize it as a 5-bit GIF and save it in a 

new folder named project_12-7. 
2. Follow the steps in project 5 again, saving the images as GIF to maintain transparency. 


3. When optimizing the slices containing the fish and the bubbles, set the Matte color 
in the Optimize palette to a blue color similar to the blue used in undersea.tif. 


4. Add an additional slice along the bottom of the image where there is just white space. 

5. Save the HTML and image files to project_12-7. Save the HTML file as fish. html. 

6. Open fish.html in a text or HTML editor and set the table to use undersea.gif as 
the background image. 


7. Preview in a browser. In some versions of Netscape, the background image will 
be reset for every table cell. This effect is unintentional, but acceptable. 


Project 8: Find Jobs on the Web 


The best place to look for Web graphic design jobs is on the Web, either through recruit- 
ing agencies or newsgroups, or sites such as hotjobs.com. Many cities have special sites 
for new media professionals in that area. In New York City, for example, many jobs are 
posted at nynma.org. To prepare yourself for professional Web graphic design jobs, you 
need to know what companies are looking for. 


1. Find at least three Web sites that have postings for jobs in Web graphic design. These 
might be the classified ad section of the online versions of a local newspaper, a 
newsgroup on deja.com, a national site such as monster.com, or any similar site. 

2. On each site, find at least three postings that interest you. 


3. What are they looking for? Is it a full-time or part-time position? Is it permanent 
or freelance? 
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4. Can you work from home or do you need to work in their office? 


5. What skills are required? Do they expect you to know print-related software such 
as Quark and Illustrator, or just Web-related software? 


6. Would you be expected to use related Web technology such as Flash and 
JavaScript? Or would you only create GIF and JPEG images? 


7. Visit the sites that placed the ads. What is the style of graphics used there? Do you 
think you would enjoy working on projects with similar styles? 


8. If you can, gauge the size of the company. Is it a big office where you will have 
many colleagues? Or will you be the only person creating graphics? 


CASE PROJECT 


By now, you should have a complete portfolio of all your graphics work. Redesign 
your home page to include a sliced image. Either create a new image, or take the image 
map you created for the last chapter and slice it into separate images. Include at least 
one animation and rollover effect. You might not want to use the button navigation 
bar on the home page, and use it only on the other pages. Use the same color in both 
the background of the home page and the background of the sliced image so the slices 
will blend in with rest of the page. 


